<script setup>
import { useRouter } from 'vue-router'
import { NIcon } from 'naive-ui'
import { useI18n } from 'vue-i18n'
import portManage from './components/portManage.vue'
import poe from './components/poe.vue'
import vlan from './components/vlan.vue'
import backIcon from '@/components/iconSvg/backIcon.vue'

const router = useRouter()
const { t } = useI18n()

const goDevice = () => {
  router.push({
    path: '/home/device'
  })
}
</script>

<template>
  <div style="position: sticky; top: 0; z-index: 1000">
    <n-card :bordered="false">
      <div class="flex items">
        <n-button quaternary circle @click="goDevice">
          <template #icon>
            <n-icon size="24"><backIcon /></n-icon>
          </template>
        </n-button>
        <div class="flex items-center select-none ml-2 text-lg">设备详情</div>
      </div>
    </n-card>
  </div>
  <div class="p-6">
    <n-card>
      <div class="flex flex-wrap items-center font-bold">
        <div class="w-full md:w-1/3 xl:w-1/4 py-2">{{ t('syste.name') }}：SIKE</div>
        <div class="w-full md:w-1/3 xl:w-1/4 py-2">{{ t('syste.version') }}：1.23.35</div>
        <div class="w-full md:w-1/3 xl:w-1/4 py-2">IP：192.168.2.26</div>
        <div class="w-full md:w-1/3 xl:w-1/4 py-2">MAC：AD:DE:DE:GE</div>
        <div class="w-full md:w-1/3 xl:w-1/4 py-2">{{ t('syste.model') }}：MKDE-3242</div>
      </div>
    </n-card>
    <div class="my-6"></div>
    <portManage />
    <div class="my-6"></div>
    <poe />
    <div class="my-6"></div>
    <vlan />
  </div>
</template>

<style scoped></style>
